<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>XD首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="circle_style.css"/>
</head>
<body style="background-color: white">
<div style="float: left; background-color: #03a9f4;width: 100%">
    <img src="./image/demo1.png" style="border-radius: 50% ;height: 60px;width: 60px;float: left; margin-left: 5%;margin-top: 3%;border: solid 1px white">
    <h2 id="circle_name" style="float: left;margin-top: 3%; margin-left: 5%;height: 15px;color: white">圈子名称</h2>


    <span class="aui-iconfont aui-icon-plus" style="float: right;color: #03a9f4;background-color: white;margin-left: 40%;width: 80px; height: 25px;
text-align: center;border-radius: 5px;margin-top: 3%;display: block" > 关注</span>


    <div style="float:left;margin-left:3%;margin-top: 5%;color: white;text-align:center;font-size: small">192关注</div>

</div>
<div style="height:200px;background-color: #03a9f4 ">
    <div style="margin-top:3%;margin-left: 8%;font-size:small;background-color: #03a9f4;font-weight: bold;color: white; float: left">圈子简介:</div>
    <div style="margin-top:3%;background-color: #03a9f4;font-size:small;float: left;color: grey">圈子的简介简介简介简介简介简介简介</div>
</div>
<div style="width: 100%;float: left;margin-top: -70px;background-color: white">
    <div class="ccdiv"  tapmode onclick="openCChoice('问答')">
        <div class="circleItem">
            <span class="aui-iconfont aui-icon-calendar item"></span>
        </div>
        <div style="float: left; margin-left: 19px; font-weight: bold;">问答</div>
    </div>

    <div class="ccdiv"  tapmode onclick="openCChoice('攻略')" >
        <div class="circleItem">
            <span class="aui-iconfont aui-icon-calendar item"></span>
        </div>
        <div style="float: left; margin-left: 19px; font-weight: bold;">攻略</div>
    </div>

    <div class="ccdiv"  tapmode onclick="openCChoice('资源')" >
        <div class="circleItem">
            <span class="aui-iconfont aui-icon-calendar item"></span>
        </div>
        <div style="float: left; margin-left: 19px; font-weight: bold;">资源</div>
    </div>

    <div class="ccdiv" tapmode onclick="openCChoice('榜单')" >
        <div class="circleItem">
            <span class="aui-iconfont aui-icon-calendar item"></span>
        </div>
        <div style="float: left; margin-left: 19px; font-weight: bold;">榜单</div>
    </div>
</div>
<section class="aui-content-padded" style="float: left">

    <div class="aui-card-list question-box">
        <div class="aui-card-list-header">
            <span class="aui-iconfont aui-icon-mail" style="background: red;color: white;float: left;border-radius: 50%;"></span>
            <div style="float: left;margin-left: -50px">现在的年轻人吃不了苦吗？</div>
        </div>
        <div class="halfLabel " style="font-size: x-small">
            <div style="float: left"  tapmode onclick="openCircle()">摄影·</div><div style="float: left">旅游·</div><div style="float: left">体验</div>
        </div>
        <div class="aui-card-list-content-padded">
            内容区域，卡片列表布局样式可以实现APP中常见的各类样式
            内容区域，卡片列表布局样式可以实现APP中常见的各类样式
        </div>
        <div class="aui-card-list-footer">
            <span class="aui-iconfont aui-icon-gear" style="float: left"></span>
            <span class="aui-iconfont aui-icon-mail" style="float: left"></span>
            <span class="aui-iconfont aui-icon-more" style="float: right"></span>
        </div>
    </div>
    <div class="aui-card-list strategy-box" style="margin-top: -20px">
        <div class="aui-card-list-header">
        <div class="halfCard">
            <img src="image/demo4.png" class="halfCimg">
            <div class="halfText">
                &nbsp&nbsp国庆节出游攻略请看这里</div>
            <span class="aui-iconfont aui-icon-home halfCion"  ></span>
            <div class="halfLabel">摄影·旅游·体验</div>
            <div style="float: left;width: 90%;margin-left: 20px">
                <img src="image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
                <div class="writer">大傻喵的-春天</div>
                <span class="aui-iconfont aui-icon-home halfCion" style="float: right" ></span>
                <span class="aui-iconfont aui-icon-home halfCion" style="float: right"></span>
            </div>
        </div>
        </div>
    </div>
    <div class="aui-card-list" style="width: 90%">
        <div class="aui-card-list-header" tapmode onclick="openResourceD()" style="width: 100%">
            <div class="resource-left">
                <div id="resource-type" class="resource-imag">
                    PDF
                </div>
            </div>
            <div class="rightR">
                <div class="nameR">高数习题锦集</div>
                <div>
                    <div class="noteR">128捧</div>
                    <div class="noteR">0踩</div>
                </div>
            </div>
        </div>
    </div>

    <div class="aui-card-list" style="width: 90%">
        <div class="aui-card-list-header" tapmode onclick="openResourceD()" style="width: 100%">
            <div class="resource-left">
                <div id="resource-type" class="resource-imag">
                    PDF
                </div>
            </div>
            <div class="rightR">
                <div class="nameR">高数习题锦集</div>
                <div>
                    <div class="noteR">128捧</div>
                    <div class="noteR">0踩</div>
                </div>
            </div>
        </div>
    </div>
    <div class="aui-card-list question-box">
        <div class="aui-card-list-header">
            <span class="aui-iconfont aui-icon-mail" style="background: red;color: white;float: left;border-radius: 50%;"></span>
            <div style="float: left;margin-left: -50px">现在的年轻人吃不了苦吗？</div>
        </div>
        <div class="halfLabel" style="font-size: x-small">
            <div style="float: left"  tapmode onclick="openCircle()">摄影·</div><div style="float: left">旅游·</div><div style="float: left">体验</div>
        </div>
        <div class="aui-card-list-content-padded">
            内容区域，卡片列表布局样式可以实现APP中常见的各类样式
            内容区域，卡片列表布局样式可以实现APP中常见的各类样式
        </div>
        <div class="aui-card-list-footer">
            <span class="aui-iconfont aui-icon-gear" style="float: left"></span>
            <span class="aui-iconfont aui-icon-mail" style="float: left"></span>
            <span class="aui-iconfont aui-icon-more" style="float: right"></span>
        </div>
    </div>

</section>
</body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/aui-tab.js" ></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript">
    var circleName ;
    apiready = function() {
        api.parseTapmode();
        $('.strategy-box').click(function () {
           openGroupStrategy(1)
        });
        $('.question-box').click(function () {
            api.openWin({
                name:'index_question',
                url:'../QandA/answer_list.html',
                pageParam: {
                    question_id: 1,
                    answer_id: 1,
                    user_id: 'e3b3dc8d20b7052f5c0799f3aa4e9f3e',
                    type:"question"
                }
            })
        });
        var title = $api.byId('circle_name');
        title.innerText=api.pageParam.circleN;
        circleName = api.pageParam.circleN;
        function closeWin(name) {
            api.closeWin();
        }
    };

    function openCChoice(name) {
        switch(name){
            case "问答":
                api.openWin({
                    name:'circle_qanda_list',
                    url:'../QandA/qz_question_list_win.html'
                });break;
            case "攻略":
                api.openWin({
                    name:'circle_strategy_list',
                    url:'circle_strategy_list.html',
                    pageParam:{
                        circle_name:circleName
                    }
                });break;
            case "资源":
                api.openWin({
                    name:'circle_resource_list',
                    url:'circle_resource_list.html'
                });break;
            case "榜单":
                api.openWin({
                    name:'circle_board_list',
                    url:'circle_board_list.html'
                });break;
        }
    }
    function openResourceD() {
        api.openWin({
            name:'Resource_detail',
            url:'../QandA/resource_detail.html'
        })
    }
    function openGroupStrategy(id) {
        api.openWin({
            name:'strategy_detail'+id,
            url:'circle_strategy_detail.html',
            pageParam:{
                article_id:id
            }
        })
    }
</script>
</html>